<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
    <meta name="keywords" content="前端,Vue.js,JavaScript,Node.js,小程序">
  
  
    <meta name="description" content="GuoYou.Li(李国有)的博客, 用于做学习过程中的笔记、总结以及知识分享">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    uni-app 给 view 设置 display:flex 后, v-show=&#34;false&#34; 在微信小程序中失效 |
    
    种子的信仰</title>
  
    <link rel="shortcut icon" href="/your/favicon.ico">
  
  
<link rel="stylesheet" href="/your/css/style.css">

  
    
<link rel="stylesheet" href="/your/fancybox/jquery.fancybox.min.css">

  
  
<script src="/your/js/pace.min.js"></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/your/atom.xml" title="种子的信仰" type="application/atom+xml">
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-uni-app-display-flex-v-show-invalid" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

    <div class="article-inner">
        
            <header class="article-header">
                
  
    <h1 class="article-title" itemprop="name">
      uni-app 给 view 设置 display:flex 后, v-show=&#34;false&#34; 在微信小程序中失效
    </h1>
  
  




            </header>
            

                
                    <div class="article-meta">
                        <a href="/your/2020/08/20/uni-app-display-flex-v-show-invalid/" class="article-date">
  <time datetime="2020-08-20T15:40:28.000Z" itemprop="datePublished">2020-08-20</time>
</a>
                            
  <div class="article-category">
    <a class="article-category-link" href="/your/categories/%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/">问题解决</a> / <a class="article-category-link" href="/your/categories/%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/uni-app/">uni-app</a> / <a class="article-category-link" href="/your/categories/%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">微信小程序</a>
  </div>

                    </div>
                    

                        
                            
    <div class="tocbot"></div>





                                

                                    <div class="article-entry" itemprop="articleBody">
                                        


                                            

                                                
                                                                    <h2 id="一-问题描述"><a href="#一-问题描述" class="headerlink" title="一.问题描述"></a>一.问题描述</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Your.vue template --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span> <span class="attr">class</span>=<span class="string">"indicator"</span>&gt;</span>1/5<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Your.vue JavaScript</span></span><br><span class="line">data() &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="comment">// 显示控制</span></span><br><span class="line">    isShow: <span class="literal">false</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Your.vue style</span></span><br><span class="line">&lt;style land="scss" scoped&gt;</span><br><span class="line">  <span class="selector-class">.indicator</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>预期表现: <strong>.indicator 不显示</strong></p>
<p>结果: 在微信浏览器端 <code>view</code> 不显示, 在微信小程序中<strong>显示了!</strong></p>
<h2 id="原因分析"><a href="#原因分析" class="headerlink" title="原因分析"></a>原因分析</h2><p><code>v-show=&quot;false&quot;</code> 在 H5 浏览器中解析为 <code>style=&quot;display: none;&quot;</code> 从而隐藏元素;</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span> <span class="attr">class</span>=<span class="string">"indicator"</span> <span class="attr">style</span>=<span class="string">"display: none;"</span>&gt;</span>1/5<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>在小程序中则通过 css 隐藏元素, 而 display: flex; 的层级覆盖了标签属性的样式, 导致<code>view</code> 显示在页面上了</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 微信小程序生成的 css */</span></span><br><span class="line"><span class="selector-tag">view</span><span class="selector-attr">[hidden]</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>所以根本原因是因为最终生成的 <code>CSS</code> <strong>权重</strong> 的不同, 在某些情况下覆盖了微信小程序设置的 <code>view[hidden]</code>, 而导致元素没有正确隐藏</p>
<h3 id="CSS-的权重等级"><a href="#CSS-的权重等级" class="headerlink" title="CSS 的权重等级"></a><code>CSS</code> 的权重等级</h3><img src="/your/2020/08/20/uni-app-display-flex-v-show-invalid/20200821224131.jpg" class="" title="css 权重">

<blockquote>
<p>!important, 权值为最大<br>内联样式，如: style=””，权值为 1000。<br>ID 选择器，如：#content，权值为 100。<br>类，伪类和属性选择器，如 .content, ::after, div[type=’text’]，权值为 10。<br>元素和伪元素选择器，如 h2、:hover，权值为 1。</p>
</blockquote>
<p>那么可以得到如下:</p>
<p>微信小程序隐藏元素样式: <strong>权重值 1 + 10 = 11</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 设置 v-show="false" 后微信开发者工具中可以看到 */</span></span><br><span class="line"><span class="selector-tag">view</span><span class="selector-attr">[hidden]</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="情况-1-使用全局样式"><a href="#情况-1-使用全局样式" class="headerlink" title="情况 1: 使用全局样式"></a>情况 1: 使用全局样式</h3><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 全局样式 uni.scss */</span></span><br><span class="line"><span class="selector-class">.your-flex</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>最终生成的样式 <code>.your-flex { display: flex; align-items: center; }</code> <strong>权重值 10</strong></p>
<p>10 &lt; 11 这种情况使用 <code>v-show=&quot;false&quot;</code> <strong>是生效的</strong></p>
<hr>
<h3 id="情况-2-1-页面或组件内写样式"><a href="#情况-2-1-页面或组件内写样式" class="headerlink" title="情况 2.1: 页面或组件内写样式"></a>情况 2.1: 页面或组件内写样式</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* scoped 模式下: */</span></span><br><span class="line">&lt;style land="scss" scoped&gt;</span><br><span class="line">  <span class="selector-class">.indicator</span> &#123;</span><br><span class="line">    <span class="comment">/* 其他... */</span></span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="comment">/* 其他... */</span></span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>最终的 <code>html</code> 会生产一串 <code>css</code>: 比如: <code>class=&quot;indicator data-v-01011e28&quot;</code>,</p>
<p><code>.indicator.data-v-01011e28 { display: flex; }</code> <strong>权重值 10 + 10 = 20</strong></p>
<p>20 &gt; 11 这种情况使用 <code>v-show=&quot;false&quot;</code> <strong>是无效的</strong></p>
<hr>
<h3 id="情况-2-2-页面或组件内写样式"><a href="#情况-2-2-页面或组件内写样式" class="headerlink" title="情况 2.2: 页面或组件内写样式"></a>情况 2.2: 页面或组件内写样式</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 去掉 scoped */</span></span><br><span class="line">&lt;style land="scss"&gt;</span><br><span class="line">  <span class="selector-class">.indicator</span> &#123;</span><br><span class="line">    <span class="comment">/* 其他... */</span></span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="comment">/* 其他... */</span></span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>最终生成的 <code>css</code> <code>.indicator { display: flex; }</code> <strong>权重值 10</strong></p>
<p>10 &lt; 11 这种情况使用 <code>v-show=&quot;false&quot;</code> <strong>是生效的, 但是并不推荐</strong></p>
<hr>
<h3 id="情况-2-2-1-值得注意的是"><a href="#情况-2-2-1-值得注意的是" class="headerlink" title="情况 2.2.1: 值得注意的是"></a>情况 2.2.1: 值得注意的是</h3><p>如果外层被其他元素包裹了:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 去掉 scoped */</span></span><br><span class="line">&lt;style land="scss"&gt;</span><br><span class="line">  <span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="comment">/* 其他... */</span></span><br><span class="line">    <span class="selector-class">.indicator</span> &#123;</span><br><span class="line">      <span class="comment">/* 其他... */</span></span><br><span class="line">      <span class="attribute">display</span>: flex;</span><br><span class="line">      <span class="comment">/* 其他... */</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p><code>.container .indicator { display: flex; }</code>: <strong>权重值 10 + 10 = 20</strong></p>
<p>20 &gt; 11 这种情况使用 <code>v-show=&quot;false&quot;</code> <strong>是无效的</strong></p>
<hr>
<h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><p>通过上面的分析, 可以得到下面的解决方式</p>
<ol>
<li>使用全局样式设置 <code>display: flex;</code></li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 全局样式 uni.scss */</span></span><br><span class="line"><span class="selector-class">.your-flex</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 比如直接 使用 ui 组件库 uView 的 .u-flex</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>设置 <code>view[hidden]</code> 最高权重</li>
</ol>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* #ifdef MP-WEIXIN */</span></span><br><span class="line">view<span class="selector-attr">[hidden]</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* #endif */</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li><p>不使用 <code>v-show</code>, 通过行内样式 <code>style</code> 设置 <code>display: &quot;none&quot;</code> 实现隐藏</p>
</li>
<li><p>使用 <code>v-if</code> 代替 <code>v-show</code>, 两个实现隐藏的机制不一样, 不推荐</p>
</li>
</ol>
<p><strong>参考</strong></p>
<p><a href="https://blog.csdn.net/longfeng1234/article/details/94436068" target="_blank" rel="noopener">微信小程序条件渲染 hidden 与 wx:if 的比较和不生效问题 - CSDN</a><br><a href="https://www.jianshu.com/p/a8cf1e55032c" target="_blank" rel="noopener">CSS：权重 - 简书</a></p>

                                                                        
                                    </div>
                                    <footer class="article-footer">
                                        <!-- 注释 - 分享按钮 -->
                                        <!-- <a data-url="http://liguoyou.gitee.io/your/2020/08/20/uni-app-display-flex-v-show-invalid/" data-id="cl0gvpjqw0012m4on9lu1gqmr" class="article-share-link">
                                            分享
                                        </a> -->
                                        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/flex/" rel="tag">flex</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/uni-app/" rel="tag">uni-app</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/v-show/" rel="tag">v-show</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="tag">微信小程序</a></li></ul>

                                    </footer>

    </div>

    
        
  <nav class="article-nav">
    
      <a href="/your/2020/08/29/uni-app-video-example/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            uni-app 的 video 组件的使用
          
        </div>
      </a>
    
    
      <a href="/your/2020/08/14/string-prototype-padStart-and-padEnd/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">JavaScript 内置对象 String 的 padStart() 和 padEnd() 方法</div>
      </a>
    
  </nav>


            

                
                    
                        
  <div class="gitalk" id="gitalk-container"></div>
  <p style="color: #999; font-size: 12px; text-align: center;">
    第三方评论系统 -- Gitalk: 偶尔可能出现加载失败的情况, 您可以选择刷新或者前往 
    <a href="https://github.com/liguoyou/your/issues" target="_blank">issues</a>
    提交和查看评论
  </p>
  
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

  
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

  
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '2e731d2b04096a7c71ab',
      clientSecret: '41e2e15eb8edebd8efd5a6da558a44d60f33468a',
      repo: 'your',
      owner: 'liguoyou',
      admin: ['liguoyou'],
      // id: location.pathname,      // Ensure uniqueness and length less than 50
      id: md5(location.pathname),
      distractionFreeMode: false,  // Facebook-like distraction free mode
      pagerDirection: 'last'
    })

  gitalk.render('gitalk-container')
  </script>

                            

</article>
</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2022 种子的信仰</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean" target="_blank" rel="noopener">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/your/"><img src="/your/images/logo.png" alt="种子的信仰"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/">首页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/archives">时间轴</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/categories">分类</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/tags">标签</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/your/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="请输入关键词...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>

<script src="/your/js/jquery-2.0.3.min.js"></script>


<script src="/your/js/jquery.justifiedGallery.min.js"></script>


<script src="/your/js/lazyload.min.js"></script>


<script src="/your/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/your/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/your/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>


<script src="/your/js/ocean.js"></script>


</body>
</html>